<template>
	<view>
		<daDropdown :dropdownMenu="dropdownMenuList" themeColor="rgba(238, 33, 45, 1)" textColor="#333333"
			:duration="300" fixedTop :fixedTopValue="statusBarHeight+150" @confirm="handleConfirm" @close="handleClose"
			@open="handleOpen" ref="daDrop">
			<template v-slot:slot1="{item,index}">

				<view class="container">
					<view class="presets">
						<DropdownCell :dropdownItem="item" :dropdownIndex="index" @success="handleCellSelect" />
					</view>
					<view class=" card">
						<view class="title">自定义</view>
						<view class="input-container">
							<u-input v-model="salaryFilterData.min" type="number" placeholder="最低薪资" />
							<text>-</text>
							<u-input v-model="salaryFilterData.max" type="number" placeholder="最高薪资" />
						</view>
						<view style="width: 100%;">
							<PartDropdownFooter @reset="handleReset()" @confirm="handleConfirmAlone()">
							</PartDropdownFooter>
						</view>
					</view>
				</view>
			</template>
		</daDropdown>
		<view class="content">
<!-- 			<view class="acea-row row-middle type-bg">
				<view class="type" :class="typeOn==index?'type-on':''" v-for="(item,index) in types" :key="index"
					@click="typeNavClick(item,index)">
					{{item.name}}
				</view>
			</view> -->
			<view class='line'>
				<recruit :list="list" v-if="categoryOn == 1"></recruit>
				<job :list="list" v-else></job>
			</view>
			<view style="margin-top: 80rpx;">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import recruit from "@/components/listItems/recruit.vue"
	import job from "@/pages/others/components/listItems/job.vue"
	import emptyPage from '@/components/emptyPage.vue';
	import daDropdown from '@/pages/others/components/da-dropdown/index.vue'
	import DropdownCell from '@/pages/others/components/da-dropdown/components/cell.vue'
	import PartDropdownFooter from '@/pages/others/components/da-dropdown/components/part-dropdown-footer.vue'
	import {
		getAreaApi
	} from '@/api/service.js'
	import {
		getPositionListApi
	} from '@/api/recruit.js'
	import {
		classificationList
	} from "@/api/subletOfShop.js";
	import {
		getObjectListApi,
		getJobList,
		getRecruitList
	} from '@/api/recruit.js'
	import {
		toPage
	} from '@/filters/commFilter.js'
	export default {
		components: {
			emptyPage,
			recruit,
			job,
			daDropdown,
			DropdownCell,
			PartDropdownFooter
		},
		props: {
			categoryOn: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				isWidth: 42,
				isLeft: 0,
				tabLeft: 0,
				types: [{
					name: '全职',
					value: 0
				}, {
					name: '兼职',
					value: 1
				}],
				typeOn: 0,
				imagesCdn: app.globalData.imagesCdn,
				// categoryOn: 0,
				categoryList: [{
					name: '求职',
					image: '/images/releases/navS_06.png',
				}, {
					name: '招工',
					image: '/images/releases/navS_07.png',
				}],
				page: 1,
				loading: true,
				loadend: false,
				loadTitle: '加载更多',
				moreShow: false,
				list: [],
				totalPage: 0,
				search: {},
				searchData: {
					fullStatus: '0'
				},
				dropdownMenuList: [{
					title: '类型',
					type: 'cell',
					prop: 'fullStatus',
					showAll: false,
					showIcon: true,
					value: '0', // 默认内容2
					options: [{
							label: '全职',
							value: '0'
						},
						{
							label: '兼职',
							value: '1'
						},
					],
				}, {
					title: '区域',
					type: 'cell',
					prop: 'distict',
					showAll: true,
					showIcon: true,
					// value: '2', // 默认内容2
					options: [],
				}, {
					title: '职位',
					type: 'filter',
					prop: 'mft',
					showAll: true,
					showIcon: true,
					// value: '2', // 默认内容2
					options: [{
						title: '请选择职位',
						type: 'checkbox',
						prop: 'job',
						options: [],
					}, ],
				}, {
					title: '行业',
					type: 'picker',
					prop: 'industry',
					showAll: true,
					showIcon: true,
					// value: '2', // 默认内容2
					options: [],
				}, {
					title: '薪资',
					type: 'slot1',
					prop: 'salary',
					showArrow: true,
					options: [{
							label: '5000以下',
							value: '0-5000'
						},
						{
							label: '5000-10000',
							value: '5000-10000'
						}
					]
				}],
				salaryFilter: [{
						label: '5000以下',
						value: '1'
					},
					{
						label: '5000-10000',
						value: '5000-10000'
					}
				],
				salaryFilterData: {
					min: '',
					max: '',
				},
				count: 0
			}
		},
		onLoad(option) {
			// #ifdef MP || APP-PLUS
			let height = app.globalData.navHeight - 90;
			this.statusBarHeight = height + 4;
			// #endif
			// #ifdef H5
			this.statusBarHeight = 20;
			// #endif
			// this.categoryOn = option.categoryOn || 0


		},
		mounted() {
			this.getArea();
			this.getIndustry();
			this.getJobs();
		},
		onReachBottom() {
			this.toMore()
		},
		onShow() {

			// this.initData()

		},
		watch: {
			categoryOn: {
				handler() {

					this.initData()
				},
				immediate: false
			},
			count() {
				console.log("this.count", this.count)
				if (this.count == 3) {
					this.$nextTick(() => {
						console.log("this.dropdownMenuList", this.dropdownMenuList)
						this.$refs.daDrop.reshData();
					})

				}
			}
		},

		methods: {
			toPage,
			toMore() {
				console.log('more')
				if (this.page >= this.totalPage) {
					this.loadTitle = "暂无更多"
					return;
				};

				this.page += 1;
				this.moreShow = true
				this.initData()
			},
			setSalaryRange(min, max) {
				this.minSalary = min;
				this.maxSalary = max;
			},
			handleConfirm(v) {
				console.log('handleConfirm ==>', v)
				let t = {};
				if (v.mft) {
					t = v.mft;
				} else {
					t = v
				}
				this.searchData = {
					...this.searchData,
					...t
				}
				console.log(this.searchData)
				this.initData()
			},
			async getJobs() {
				let {
					data
				} = await getPositionListApi();
				this.dropdownMenuList[2].options[0].options = data.map(item => {
					return {
						value: item.id,
						label: item.name
					}
				});
				this.count++;

			},
			async getIndustry() {
				let {
					data
				} = await classificationList();
				this.dropdownMenuList[3].options = data.map(item => {
					if (item.children) {
						item.children = item.children.map(ch => ({
							value: ch.id,
							label: ch.name
						}))
					}
					return {
						value: item.id,
						label: item.name,
						children: [{
							value: '-1',
							label: item.name,
						}, ...(item.children ? item.children : [])]
					}
				});
				console.log('this.dropdownMenuList[3].options', this.dropdownMenuList[3].options)
				// this.$refs.daDrop.reshData();
				this.count++;
				// 
			},
			getArea() {
				getAreaApi({
					city: this.$city,
				}).then(res => {
					console.log("res", res)
					this.dropdownMenuList[1].options = res.data.map(item => {
						return {
							value: item.regionId,
							label: item.regionName
						}
					})
					this.count++;
				})
			},
			handleClose(v) {
				console.log('handleClose ==>', v)
			},
			handleOpen(v) {
				console.log('handleOpen ==>', v)
			},
			handleCellSelect(callbackData, cellItem, index) {
				console.log(callbackData, cellItem)
				let sal = callbackData.salary.split('-');
				if (sal.length > 1) {
					this.salaryFilterData.min = sal[0]
					this.salaryFilterData.max = sal[1]
				} else {
					this.salaryFilterData.min = sal[0]
				}
				console.log(this.salaryFilterData)
				this.$refs.daDrop?.closeMenuPopup()
				this.initData()
			},
			handleReset() {
				this.salaryFilterData.min = '';
				this.salaryFilterData.max = '';
			},
			handleConfirmAlone() {
				this.$refs.daDrop?.closeMenuPopup()
				this.toSearch();
			},
			async getList() {
				try {
					this.loading = false;
					let {
						data
					} = await getObjectListApi({
						limit: 10,
						fullStatus: this.types[this.typeOn].value,
						page: this.page,
						city: this.$city
					});
					this.loading = true;
					let list = [];
					// data.list.map((item,index) => {
					// 	item.list.map(child => {
					// 		list.push({ ...child, type: index })
					// 	})
					// })
					let r = data.list[0].list.map(item => ({
						...item,
						type: 0,
					}))
					let j = data.list[1].list.map(item => ({
						...item,
						type: 1,
					}))
					list = [...r, ...j]
					console.log('list', list)
					if (list.length < 1) {
						this.loadTitle = '暂无更多'
					} else {
						this.loadTitle = '加载更多'
					}

					return {
						list,
						totalPage: data.totalPage
					}
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			//求职列表
			getJobList(sear) {
				return {
					page: this.page,
					city: this.$city,
					limit: 10,
					fullStatus: this.types[this.typeOn].value,
					...sear,
					...this.search
				}
			},
			//招工列表
			getRecruitList(sear) {
				return {
					page: this.page,
					fullStatus: this.types[this.typeOn].value,
					city: this.$city,
					limit: 10,
					...sear,
					...this.search
				}
			},
			goback() {
				// #ifdef H5
				return history.back();
				// #endif
				// #ifndef H5
				return uni.navigateBack({
					delta: 1,
				})
				// #endif
			},
			typeNavClick(item, index) {
				this.typeOn = index;
				this.initData()
			},
			toSearch(params) {
				this.search = {
					...this.search,
					...params
				}
				this.page = 1;
				this.list = [];
				this.initData();
			},
			async initData() {
				let params = {}
				this.page = 1;
				this.list = []
				let sear = {
					salary: this.salaryFilterData.min,
					salarys: this.salaryFilterData.max,
				}
				for (let k in this.searchData) {
					if (Array.isArray(this.searchData[k])) {
						sear[k] = this.searchData[k].join(',')
					} else {
						sear[k] = this.searchData[k];
					}
				}
				console.log("sear", sear, this.searchData)
				switch (this.categoryOn) {
					case 0 || '0':
						params = this.getJobList(sear)
						break;
					case 1 || '1':
						params = this.getRecruitList(sear)
						break;
					default:
						break;
				};
				console.log("params", params)
				this.$emit("toSearch", params)
			},
			// 导航栏点击
			categoryNavClick(item, index) {
				if (index == 5 || index == 6) {
					let title = item.name
					uni.setNavigationBarTitle({
						title: title
					})
				} else {
					let title = item.name
					uni.setNavigationBarTitle({
						title: title
					})
				}

				if (this.categoryList.length > 6) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.categoryOn = index //设置导航点击了哪一个
				this.isLeft = index * this.isWidth //设置下划线位置
				this.initData()
			},
		}
	}
</script>

<style lang="scss">
	.type-bg {
		padding: 24rpx 30rpx;
		background: rgba(247, 248, 250, 1);

		.type~.type {
			margin-left: 18rpx;
		}

		.type {
			padding: 6rpx 24rpx;
			border-radius: 10rpx;
			border: 1px solid rgba(229, 229, 229, 1);
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
		}

		.type-on {
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			color: #ffffff;

		}
	}

	.header-top {
		position: relative;
		height: 88rpx;
		line-height: 88rpx;
		background: rgba(238, 33, 45, 1);
		padding: 0rpx 30rpx;
		text-align: center;

		.header-top-tittle {
			font-size: 36rpx;
			color: rgba(255, 255, 255, 1);
		}

		.right-tip {
			position: absolute;
			right: 26rpx;
			top: 50%;
			transform: translateY(-20rpx);
			height: 40rpx !important;
			width: 40rpx !important;
			margin: unset !important;
		}
	}

	.nav-bg {
		background: #ffffff;
		padding: 18rpx 30rpx 36rpx;

		// overflow-x: scroll;
		// white-space: normal!important;
		.item~.item {
			margin-left: 36rpx;
		}

		.item {
			display: inline-block;
			white-space: nowrap;

			.img {
				margin: 0 auto;
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				background: #ffffff;

				image {
					width: 42rpx;
					height: 44rpx;
				}
			}

			.name {
				// width: 108rpx;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
			}
		}

		.item-on {
			.img {
				background: rgba(247, 247, 247, 1);
			}

			.name {
				color: rgba(239, 39, 50, 1);
			}
		}
	}

	.fixed-top {
		width: 100%;
		background: #EE212D;
		position: fixed;
		top: 0;
		left: 0;
		height: 240rpx;
		z-index: 999;

		.back {
			position: absolute;
			left: 26rpx;
			top: 50%;
			transform: translateY(-11rpx);
			height: 30rpx !important;
			width: 22rpx !important;
			margin: unset !important;
		}
	}

	.presets {
		// display: flex;
		// justify-content: space-around;
		// margin-bottom: 20px;
		border-bottom: 1px solid #ccc;
	}

	.card {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		padding: 20px;

	}

	.title {
		font-size: 28rpx;
		margin-right: 10rpx;
	}

	.input-container {
		display: flex;
		align-items: center;
		width: 295rpx;
	}

	.label {
		width: 80px;
		/* 调整标签宽度以匹配设计 */
		font-size: 16px;
	}
</style>